<!DOCTYPE html>
<html>
	<head>
		<title>注册登录界面</title>
		<meta name="keywords" content="注册登录界面" />
		<meta name="description" content="最全的注册登录界面下载网站http://cn.inspinia.cn" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
		<script type="application/x-javascript">
			addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
		</script>
		<style>
			.submit {
				border: 1px solid gray;
				width: 300px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<h1>Cube Sign In Form</h1>
		<div class="app-block">
			<div class="cube">
				<img src="images/cube.png" class="img-responsive" alt="" />
			</div>
			<form id="myForm" action="javascript:void(0);" method="post">
				<input
					type="text"
					id="userName"
					class="text"
					value="Login Id"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'login id';}"
				/>
				<input
					type="password"
					id="password"
					value="Password"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'Password';}"
				/>
				<!-- 添加按钮 -->
				<button id="bt01" class="submit">submit</button>
				<div class="clear"></div>
				<p><a href="#">Forgot Password ?</a></p>
			</form>
			<p class="sign">New here ? <a href="#"> Sign Up</a></p>
		</div>
		<div class="copy-right">
			<p>
				Copyright &copy; 2015 All rights Reserved | Template by &nbsp;<a
					href="https://shop585798004.taobao.com/"
					target="_blank"
					>前端ui</a
				>
			</p>
		</div>

		<script>
			// 页面加载时候执行的函数
			$(function () {
				// 事件绑定
				$("#bt01").on("click", function () {
					logVerify();
				});
			});

			// 跳转网页
			function fun01() {
				location.href = "index2.html";
				location.href;
			}

			// 提交姓名和密码验证
			function logVerify() {
				var user = {};
				user.userName = $("#userName").val();
				user.password = $("#password").val();

				// 调用 ajax 函数，参数为 ajax 的配置属性对象
				$.ajax({
					url: "http://www.sfac.xyz/api/login",
					type: "post",
					contentType: "application/json",
					data: JSON.stringify(user),
					success: function (result) {
						if (result.status == 200) {
							alert("登录成功");
							console.log(result.data);
							fun01();
						} else {
							alert("登录失败");
						}
					},
					error: function (erro) {
						console.log(erro);
					},
				});
			}
		</script>
	</body>
</html>
